<template>
  <div class="medical-wrapper">
    <DockerTitle titleText="病历首页"></DockerTitle>
    <el-form :model="wyform" label-width="100px">
      <el-form-item label="主诉">
        <el-input type="textarea" :rows="3" v-model="wyform.readme" placeholder="请输入主诉"></el-input>
      </el-form-item>
      <el-form-item label="现病史">
        <el-input type="textarea" :rows="3" v-model="wyform.present" placeholder="请输入现病史"></el-input>
      </el-form-item>
      <el-form-item label="现病治疗情况">
        <el-input type="textarea" :rows="3" v-model="wyform.presentTreat" placeholder="请输入现病治疗情况"></el-input>
      </el-form-item>
      <el-form-item label="既往史">
        <el-input type="textarea" :rows="3" v-model="wyform.history" placeholder="请输入既往史"></el-input>
      </el-form-item>
      <el-form-item label="过敏史">
        <el-input type="textarea" :rows="3" v-model="wyform.allergy" placeholder="请输入过敏史"></el-input>
      </el-form-item>
      <el-form-item label="体格检查">
        <el-input type="textarea" :rows="3" v-model="wyform.physique" placeholder="请输入体格检查"></el-input>
      </el-form-item>
      <el-form-item label="诊断">
        <el-table ref="wytable" :data="tableData">
          <el-table-column type="selection" width="55" />
          <el-table-column label="疾病编码" prop="diseaseCode"></el-table-column>
          <el-table-column label="疾病名称" prop="diseaseName"></el-table-column>
          <el-table-column label="国际ICD编码" prop="diseaseICD"></el-table-column>
          <el-table-column label="疾病类型" prop="diseaseCategory"></el-table-column>
          <el-table-column>
            <template #header>
              <el-button size="small" type="primary" @click="diseaseDialog.show = true">添加</el-button>
              <el-button size="small" type="danger" @click="delDisease">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="检查建议">
        <el-input type="textarea" :rows="3" v-model="wyform.proposal" placeholder="请输入检查建议"></el-input>
      </el-form-item>
      <el-form-item label="注意事项">
        <el-input type="textarea" :rows="3" v-model="wyform.careful" placeholder="请输入注意事项"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
        v-model="diseaseDialog.show"
        title="添加疾病诊断"
        :close-on-click-modal="false"
        width="800px">
      <Disease v-model:tableData="tableData"
               v-model:show="diseaseDialog.show"
               v-if="diseaseDialog.show"
      ></Disease>
    </el-dialog>
  </div>
</template>

<script setup>
import { RegisterStore } from '@/stores/counter'
import { reactive, ref } from 'vue'
import Disease from './disease'
import { ElMessage } from 'element-plus'
import { post, get } from '@/util/axios'
import DockerTitle from '@/components/doctor/title'
import { useRoute } from 'vue-router'
import { url } from './api'
const route = useRoute()
if (route.query.id) {
  getById()
}
const wytable = ref()
const registerStore = RegisterStore()
const registRecord = registerStore.get()
const wyform = reactive({
  registerId: null,
  readme: '',
  present: '',
  presentTreat: '',
  history: '',
  allergy: '',
  physique: '',
  proposal: '',
  careful: ''
})
wyform.registerId = registRecord.value.id
const diseaseDialog = reactive({
  show: false
})
const tableData = ref([])
function delDisease () {
  const rows = wytable.value.getSelectionRows()
  if (rows.length) {
    for (const i in rows) {
      const id = rows[i].id
      for (const j in tableData.value) {
        if (id === tableData.value[j].id) {
          tableData.value.splice(j, 1)
          break
        }
      }
    }
  } else {
    ElMessage.error('未选中任何疾病项目')
  }
}
function save () {
  const diseaseIds = []
  for (const i in tableData.value) {
    diseaseIds.push(tableData.value[i].id)
  }
  post(route.query.id ? url.update  : url.add, {...wyform, diseaseIds: diseaseIds }, content => {
    console.dir(content)
  })
}
function getById () {
  get(url.getByRegisterId, { id: route.query.id }, content => {
    console.dir(content)
    for (const key in wyform) {
      if (Object.prototype.hasOwnProperty.call(content, key)) {
        wyform[key] = content[key]
      }
    }
    wyform.id = content.id
    tableData.value = content.diseaseList
  })
}

</script>

<style scoped lang="scss">

.el-form {
  margin-top: 30px;
  width: 1000px;
  .el-form-item  {
    margin-bottom: 1px;
    background-color: #FAFAFA;
  }
}
</style>
